<template>
  <list-searcher :searchList="searchList" v-model:searchForm="carModelStockState.queryParam" @loadData="loadData" />
  <!-- 骨架屏 -->
  <a-skeleton v-if="initLoading" :animation="true">
    <a-skeleton-line :rows="3" :line-height="90" />
  </a-skeleton>
  <a-spin v-else :loading="loading" tip="加载中..." style="width: 100%">
    <StockBody @loadData="loadData" />
  </a-spin>
</template>

<script setup lang="ts" name="CarModelStock">
  import dayjs from 'dayjs'
  import { reactive, computed, provide, ref } from 'vue'
  import { getCarModelStock } from '@/api/asset/carModelStock'
  import StockBody from './components/stock-body.vue'

  const today = dayjs()
  const carModelStockState = reactive({
    // 接口参数（不包含page信息）
    queryParam: {
      siteId: undefined,
      seriesIdList: undefined,
      modelIdList: undefined,
      type: undefined,
      // 默认3个月
      dateRange: [today.format('YYYY-MM-DD 00:00:00'), today.add(3, 'month').format('YYYY-MM-DD 23:59:59')],
      startTime: '',
      endTime: '',
    },
    stockData: [],
    statistics: {},
  })
  provide('carModelStockState', carModelStockState)

  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '门店',
        prop: 'siteId',
        type: 'remote-select',
        attrs: {
          type: 'site_listBystaff',
          allowClear: false,
          params: {
            oldId: carModelStockState.queryParam.siteId,
          },
        },
        // 变更门店，车型清空
        change: () => {
          carModelStockState.queryParam.seriesIdList = undefined
          carModelStockState.queryParam.modelIdList = undefined
        },
      },
      {
        label: '车系',
        prop: 'seriesIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_carSeries_bySite',
          mountedLoad: false,
          params: {
            siteId: carModelStockState.queryParam.siteId,
          },
        },
        change: () => {
          carModelStockState.queryParam.modelIdList = undefined
        },
      },
      {
        label: '车型',
        prop: 'modelIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_car_model_bySite',
          mountedLoad: false,
          params: {
            siteId: carModelStockState.queryParam.siteId,
            seriesIdList: carModelStockState.queryParam.seriesIdList,
          },
        },
      },
      {
        label: '时间',
        prop: 'dateRange',
        type: 'i-range-picker',
        attrs: {
          allowClear: false,
          // showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        disabledDate: (current: string) => {
          const today = dayjs().startOf('day')
          const cur = dayjs(current)
          return cur.isBefore(today) || cur.isAfter(today.add(100, 'day'))
        },
      },
    ]
  })

  // 加载数据
  // loading状态 init loading loaded
  const initLoading = ref(true)
  const loading = ref(false)
  let lastSiteId = undefined as any
  const loadData = () => {
    const query = carModelStockState.queryParam
    if (!query.siteId) {
      query.siteId = lastSiteId
    }
    lastSiteId = query.siteId
    query.startTime = dayjs(query.dateRange[0]).format('YYYY-MM-DD 00:00:00')
    query.endTime = dayjs(query.dateRange[1]).format('YYYY-MM-DD 23:59:59')
    query.dateRange = [query.startTime, query.endTime]
    loading.value = true
    carModelStockState.stockData = []
    getCarModelStock(query).then((res: any) => {
      if (initLoading.value) {
        setTimeout(() => {
          initLoading.value = false
        }, 400)
      }
      loading.value = false
      carModelStockState.stockData = res.result.list
      carModelStockState.statistics = res.result.statistics
    })
  }
  const syncQueryParam = (queryParam: any) => {
    carModelStockState.queryParam.siteId = queryParam.siteId
    carModelStockState.queryParam.seriesIdList = queryParam.seriesIdList
    carModelStockState.queryParam.modelIdList = queryParam.modelIdList
    carModelStockState.queryParam.startTime = queryParam.startTime
    carModelStockState.queryParam.endTime = queryParam.endTime
    carModelStockState.queryParam.dateRange = queryParam.dateRange
  }
  const getQueryParam = () => {
    return carModelStockState.queryParam
  }
  defineExpose({ loadData, getQueryParam, syncQueryParam })
</script>
